<nz-table #editRowTable [nzData]="listOfData" [nzFrontPagination]="false">
  <thead>
    <tr>
      <th nzWidth="25%">成员姓名</th>
      <th nzWidth="15%">工号</th>
      <th nzWidth="40%">所属部门</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    @for (data of editRowTable.data; track data) {
      <tr>
        @if (!editCache[data.id].edit) {
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td><a (click)="startEdit(data.id)">Edit</a></td>
        } @else {
          <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.name" /></td>
          <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.age" /></td>
          <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.address" /></td>
          <td>
            <a class="save" (click)="saveEdit(data.id)">Save</a>
            <a nz-popconfirm nzTitle="Sure to cancel?" (nzOnConfirm)="cancelEdit(data.id)">Cancel</a>
          </td>
        }
      </tr>
    }
  </tbody>
</nz-table>
<button class="add-button with-full" nz-button nzType="dashed">
  <i nz-icon nzType="plus"></i>
  新增成员
</button>
